<template>

  <div class="idcard"  >
    <div class="bar" @click="goCardAdd" ><van-icon name="add-o" />添加银行卡</div>
    <div class="bank_item" v-for="(item,index) in list" :key="index" @click="goCardDatail(item.id)"  >
      <div class="up">
        <span>
          持卡人：{{item.cardholder_name}}
          <span style="float: right;padding-right: 10px;font-size: 12px;color: #666666">备注：{{item.remak}}</span>
        </span>
        </div>
      <div class="up2">卡号：{{item.card_no}} <span style="float: right;padding-right: 10px">{{item.bankname}}</span></div>
    </div>
  </div>

</template>
<script>
  import { bankCardList } from "../../api/user";
  import { Toast } from 'vant';
  export default {
    data() {
      return {
        list:[],
      };
    },
    methods: {

      getCardList() {
        bankCardList().then(res => {
          Toast("加载完成");
          this.list = res.data.list
        });
      },
      goCardAdd(){
        this.$router.push({
          path: "/cardAdd"
        });
      },
      goCardDatail(banckCard_id){
        this.$router.push({
          path: "/cardDetail?id="+banckCard_id
        });
      },
    },

    created() {
      this.getCardList();
    }
  };
</script>
<style lang="scss">
  .idcard {
    width: 100%;
    padding-bottom: 48px;
    background-color: #f5f5f5;
    .bar{
      background-color: white;
      width:100%;
      height: 40px;
      margin-bottom: 15px;
      padding-left: 10px;
      padding-top: 12px;
    }
    .bank_item{
      background-color: white;
      width:90%;
      height: 80px;
      margin: 0 auto;
      margin-top: 15px;
      padding-left: 10px;

      .up{
        height: 50%;
        padding-top: 5%;

      }
    }
  }
</style>


